<template>
	<view>
		<text style="font-size: 40rpx;font-weight: 700;">物品信息</text>
		<view class="material_item">
			<text style="font-weight: 700;">物品名称</text>：{{material.thing_name}}
		</view>
		<view class="material_item">
			<text style="font-weight: 700;">物品描述</text>：{{material.thing_describe}}
		</view>
		<view class="material_item u-flex">
			<text style="font-weight: 700;">物品图片</text>：
			<image v-for="img in material.thing_images" :src="img | getImage" style="width: 150rpx;margin-right: 15rpx;"
				mode="widthFix" @click="imagePreview(material.thing_images)" />
		</view>
		<view v-if="material.thing_video" class="material_item u-flex">
			<text style="font-weight: 700;">物品视频</text>：
			<video :src="material.thing_video" controls></video>
		</view>
		<view class="material_item u-flex">
			<text style="font-weight: 700;">鉴定材料</text>：
			<image v-for="img in material.certificate" @click="imagePreview(material.certificate)"
				style="width: 150rpx;margin-right: 15rpx;" :src="img | getImage" mode="widthFix" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				material: {}, // 物品资料
			}
		},
		created() {
			console.log(11111, this.mid);
		},
		mounted() {
			this.initData()
		},
		props: {
			"mid": {
				type: Number,
			}
		},
		filters: {
			getImage(img) {
				return 'https://dc.huan-sha.net/api/' + img
			}
		},
		methods: {
			// 图片预览
			imagePreview(imgs = []) {
				imgs = imgs.map(it => {
					return 'https://dc.huan-sha.net/api/' + it
				})
				uni.previewImage({
					urls: imgs
				});
			},
			initData() {
				// 获取物品详情
				this.$u.api.getApplyDetail(this.mid).then(response => {
					this.material = response.data
					this.material.thing_images = this.material.thing_images.split(',')
					this.material.certificate = this.material.certificate.split(',')
				})
			}
		}
	}
</script>

<style>
</style>
